<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">硕士学位申请系统</el-breadcrumb-item>
            <el-breadcrumb-item>我的信息</el-breadcrumb-item>
        </el-breadcrumb>
        <h2>基本信息查看</h2>
        <el-form :model="form" :rules="rules" ref="form" label-width="140px" class="demo-form">

            <el-form-item label="学号" prop="studentId">
                <el-input v-model="form.id" disabled></el-input>
            </el-form-item>

            <el-form-item label="姓名" prop="paperName">
                <el-input v-model="form.stuName"></el-input>
            </el-form-item>

            <el-form-item label="姓名拼音" prop="nameAs">
                <el-input v-model="form.stuNamePinyin"></el-input>
            </el-form-item>

            <el-form-item label="性别" prop="gender">
                <el-radio-group v-model="form.stuGender">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="国家或地区" prop="region">
                <el-select v-model="form.stuCountry" placeholder="请选择您的国家">
                    <el-option v-for="country in countryies" :key="country.countryId" :value="country.countryName"
                               :label="country.countryName"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="民族" prop="nation">
                <el-select v-model="form.stuEthnicity" placeholder="请选择您的民族">
                    <el-option v-for="ethnicity in ethnicities" :key="ethnicity.ethnicityId"
                               :value="ethnicity.ethnicityName"
                               :label="ethnicity.ethnicityName"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="政治面貌" prop="politicalAffiliation">
                <el-select v-model="form.stuPoliticalAppearance" placeholder="请选择您的政治面貌">
                    <el-option v-for="political in politicals" :key="political.politicalAffiliationId"
                               :value="political.politicalAffiliationName"
                               :label="political.politicalAffiliationName"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="出生日期"  prop="birthday">
                <el-col :span="11">
                    <el-date-picker type="date" placeholder="请选择您的出生日期" v-model="form.stuBirthday"
                                    style="width: 70%;"></el-date-picker>
                </el-col>
            </el-form-item>

            <el-form-item label="身份证证件类型" prop="idCardType">
                <el-select v-model="form.stuIdType" placeholder="请选择您的证件类型">
                    <el-option v-for="type in types" :key="type.idTypeId" :value="type.idTypeName"
                               :label="type.idTypeName"></el-option>

                </el-select>
            </el-form-item>

            <el-form-item label="身份证证件号码" prop="idCard">
                <el-input v-model="form.stuIdNumber"></el-input>
            </el-form-item>

            <el-form-item label="户口所在省市" prop="stuProv">
                <el-select v-model="form.stuProv" placeholder="选择您的户口省/市">
                    <el-option v-for="province in provinces" :key="province.provId" :value="province.provName"
                               :label="province.provName"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="院系" prop="studentDepartment">
                <el-input v-model="form.studentDepartment" disabled>
                </el-input>
            </el-form-item>

            <el-form-item label="研究方向" prop="studentMajor">
                <el-input v-model="form.studentMajor" disabled>
                </el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm()">修改</el-button>
                <el-button @click="resetForm()">重置</el-button>
            </el-form-item>
        </el-form>

    </div>

</template>

<script>
import axios from "axios";

function updateData1() {
    axios({
        url: `http://localhost:8888/identity/edit/${this.id}`,
        method: "put",
        data: {
            "stuName": this.form.stuName,
            "stuNamePinyin": this.form.stuNamePinyin,
            "stuCountry": this.form.stuCountry,
            "stuGender": this.form.stuGender,
            "stuEthnicity": this.form.stuEthnicity,
            "stuPoliticalAppearance": this.form.stuPoliticalAppearance,
            "stuIdType": this.form.stuIdType,
            "stuIdNumber": this.form.stuIdNumber
        },
    })
        .then(res => {
            console.log(res);
            // 根据需要处理请求成功后的逻辑
        })
        .catch(err => {
            console.log(err);
            // 根据需要处理请求失败后的逻辑
        });
}

function updateData2() {
    axios({
        url: `http://localhost:8888/enrollment/edit/${this.id}`,
        method: "put",
        data: {
            "stuProv": this.form.stuProv,
        },
    })
        .then(res => {
            console.log(res);
            // 根据需要处理请求成功后的逻辑
        })
        .catch(err => {
            console.log(err);
            // 根据需要处理请求失败后的逻辑
        });
}

export default {
    data() {
        return {
            form: {
                id: '',
                stuName: '',
                stuNamePinyin: '',
                stuGender: '',
                stuIdNumber: ' ',
                studentDepartment: ' ',
                studentMajor: ' ',
                stuIdType: ' ',
                stuPoliticalAppearance: ' ',
                stuBirthday: ' ',
                stuCountry: ' ',
                stuEthnicity: ' ',
                stuProv: '',
            },
            id: "",
            provinces: [
                {provId: 1, provName: "福建"},
                {provId: 2, provName: "上海"},
                {provId: 3, provName: "江苏"},
                {provId: 4, provName: "广东"},
                {provId: 5, provName: "天津"},
            ],
            countryies: [
                {
                    countryId: 1,
                    countryName: '中国'
                }
            ],
            politicals: [
                {
                    politicalAffiliationId: 1,
                    politicalAffiliationName: "中国共产党员",
                }
            ],
            ethnicities: [
                {ethnicityId: 1, ethnicityName: "1族"},
                {ethnicityId: 2, ethnicityName: "2族"},
                {ethnicityId: 3, ethnicityName: "3族"},
                {ethnicityId: 4, ethnicityName: "4族"},
                {ethnicityId: 5, ethnicityName: "其他族"},
            ],
            types: [
                {
                    idTypeId: 1, idTypeName: "类型1"
                }, {
                    idTypeId: 2, idTypeName: "类型2"
                }, {
                    idTypeId: 3, idTypeName: "类型3"
                },
            ],
            rules: {//这里面设置必填属性的一些设置
                name: [
                    {required: true, message: '请输入姓名', trigger: 'blur'},
                    {min: 1, max: 8, message: '长度在 1 到 8 个汉字', trigger: 'blur'}
                ],
            }
        }
            ;
    },
    methods: {
        // 根据学号查询学籍信息
        getEnrollmentById() {
            axios({
                url: `http://localhost:8888/enrollment/detail/${this.id}`,
                method: "get",
                responseType: "json",
            }).then(res => {
                const enrollment = res.data.data;
                this.form.stuProv = enrollment.stuProv;
                this.form.studentDepartment = enrollment.studentDepartment;
                this.form.studentMajor = enrollment.studentMajor;
            })
        },
        // 根据学号查询个人信息
        getStuInfoById() {
            axios({
                url: `http://localhost:8888/identity/detail/${this.id}`,
                method: "get",
                responseType: "json",
            }).then(res => {
                const paperInfo = res.data.data;
                this.form.id = this.id;
                this.form.stuName = paperInfo.stuName;
                this.form.stuNamePinyin = paperInfo.stuNamePinyin;
                this.form.stuGender = paperInfo.stuGender;
                this.form.stuCountry = paperInfo.stuCountry;
                this.form.stuBirthday = paperInfo.stuBirthday;
                this.form.stuEthnicity = paperInfo.stuEthnicity;
                this.form.stuPoliticalAppearance = paperInfo.stuPoliticalAppearance;
                this.form.stuIdType = paperInfo.stuIdType;
                this.form.stuIdNumber = paperInfo.stuIdNumber;
            }).catch(err => {
                console.log(err);
            })
        },
        // 获取国家和地区
        getCountry() {
            axios({
                url: "http://localhost:8888/menu/country/list",
                method: "get",
                responseType: "json",
            }).then(res => {
                // console.log(res)
                this.countryies = res.data.data
            }).catch(err => {
                console.log(err)
            })
        },

        // 获取省份
        getProvince() {
            axios({
                url: "http://localhost:8888/menu/province/list",
                method: "get",
                responseType: "json",
            }).then(res => {
                // console.log(res)
                this.provinces = res.data.data
            }).catch(err => {
                console.log(err)
            })
        },
        //获取民族
        getEthnicity() {
            axios({
                url: "http://localhost:8888/menu/ethnicity/list",
                method: "get",
                responseType: "json",
            }).then(res => {
                // console.log(res)
                this.ethnicities = res.data.data
            }).catch(err => {
                console.log(err)
            })
        },
        //获取政治面貌
        getPolitical() {
            axios({
                url: "http://localhost:8888/menu/political/list",
                method: "get",
                responseType: "json",
            }).then(res => {
                // console.log(res)
                this.politicals = res.data.data
            }).catch(err => {
                console.log(err)
            })
        },
        //获取身份证证件类型
        getType() {
            axios({
                url: "http://localhost:8888/menu/idtype/list",
                method: "get",
                responseType: "json",
            }).then(res => {
                // console.log(res)
                this.types = res.data.data
            }).catch(err => {
                console.log(err)
            })
        },

        submitForm() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    // 验证通过，提交表单
                    updateData1.call(this); // 调用 updateData 函数
                    updateData2.call(this); // 调用 updateData 函数
                    alert('提交成功!');
                } else {
                    alert('提交失败，请重新提交');
                    return false;
                }
            });
        },
        resetForm() {
            this.$refs.form.resetFields();
        }
    },
    mounted() {
        this.id = localStorage.getItem('username');
        this.getEnrollmentById();
        this.getStuInfoById();
        this.getProvince();
        this.getCountry();
        this.getEthnicity();
        this.getPolitical();
        this.getType();
    }
}
</script>

<style scoped>

</style>